<template>
    <section ref="section">
        <div class="banner">
            <img class="banner-img" :src="handleImg('console/promotionBenefits-banner.png')" alt="">
        </div>

        <!-- 活动玩法 -->
        <div class="activity" ref="steps">
            <img class="img"  :src="handleImg('console/promotion-activity.png')" alt="">
            <div class="invitationLink">{{ invitationLink }}</div>
            <div class="invitate-btn" @click="onCopy()"></div>

            <QrCode class="invitation-qrcode" :el="invitationLink" :width="invitationWidth" :height="invitationWidth"
                v-if="invitationLink && invitationWidth" />
        </div>

        <!-- 月排行榜 -->
        <div class="rank">
            <div class="content">
                <div class="top-3">
                    <div class="user-list">
                        <img class="defalut-img" v-if="!inviteRank[1]?.avatar" :src="inviteRank2" alt="">
                        <div v-else class="avatar">
                            <img :src="inviteRank[1]?.avatar" alt="">
                        </div>
                        <div class="nick-name">{{ inviteRank[1]?.nickname }}</div>
                        <div class="invite-num">邀客{{ inviteRank[1]?.inviteNum }}人</div>
                    </div>

                    <div class="user-list top1">
                        <img class="defalut-img" v-if="!inviteRank[0]?.avatar" :src="inviteRank1" alt="">
                        <div v-else class="avatar">
                            <img :src="inviteRank[0]?.avatar" alt="">
                        </div>
                        <div class="nick-name">{{ inviteRank[0]?.nickname }}</div>
                        <div class="invite-num">邀客{{ inviteRank[0]?.inviteNum }}人</div>
                    </div>

                    <div class="user-list">
                        <img class="defalut-img" v-if="!inviteRank[2]?.avatar" :src="inviteRank3" alt="">
                        <div v-else class="avatar">
                            <img :src="inviteRank[2]?.avatar" alt="">
                        </div>
                        <div class="nick-name">{{ inviteRank1[2]?.nickname }}</div>
                        <div class="invite-num">邀客{{ inviteRank[2]?.inviteNum }}人</div>
                    </div>
                </div>
                <div class="top-8">
                    <div class="user-list" v-for="(item, index) in inviteRank.slice(3, 5)">
                        <img :src="item.avatar || showDeafultAvatar(index)" alt="">
                        <div class="nick-name">{{ item.nickname }}</div>
                        <div class="invite-num">邀客{{ item.inviteNum }}人</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我的邀请 -->
        <div class="invite">
            <div class="content">
                <div class="table-box">
                    <div class="table-head">
                        <div>用户昵称</div>
                        <div>是否绑定微信</div>
                        <div style="width: 2.2rem;" title="是否消费满100元（60天内）">是否消费满100元（60天内）</div>
                        <div>邀请结果</div>
                        <div>奖励</div>
                    </div>
                    <div class="table-content">
                        <div v-for="item in inviteRecord.slice(0, 7)" class="invite-list">
                            <div>{{ item.nickname }}</div>
                            <div>{{ item.isBindWechat == 1 ? '绑定' : '待绑定' }}</div>
                            <div>{{ item.isRecharge == 1 ? '是' : '否' }}</div>
                            <div>{{ selectDictLabel(statusEnum, item.status) }}</div>
                            <div>{{ item.reward > 0 ? item.reward : '-' }}</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</template>

<script setup name="PromotionBenefits">
import { ref, onMounted } from 'vue'
import { getInviteRecordApi, getInviteRankApi } from '@/api/modules/api.invite'
import QrCode from '@/components/common/QrCode.vue'
import clipboard3 from "vue-clipboard3";
import userInfoStore from '@/stores/userInfo.js'
import { XsyMessage } from '@/libs/util.toast'
import { selectDictLabel } from '@/libs/util.common'
import inviteRank1 from '@/assets/img/console/inviteRank1.png'
import inviteRank2 from '@/assets/img/console/inviteRank2.png'
import inviteRank3 from '@/assets/img/console/inviteRank3.png'
import inviteRank4 from '@/assets/img/console/inviteRank4.png'
import inviteRank5 from '@/assets/img/console/inviteRank5.png'
import inviteRank6 from '@/assets/img/console/inviteRank6.png'
import inviteRank7 from '@/assets/img/console/inviteRank7.png'
import inviteRank8 from '@/assets/img/console/inviteRank8.png'
const userInfo = ref({})
userInfo.value = userInfoStore().userInfo

const statusEnum = [
    {
        label: '邀请中',
        value: 0
    },
    {
        label: '成功',
        value: 1
    },
    {
        label: '失败',
        value: 2
    },
]

const section = ref(null)
const steps = ref(null)
const invitationWidth = ref()
onMounted(() => {
    let html = document.documentElement;
    html.style.fontSize = 100 * (section.value.offsetWidth / 1920) + "px";

    // 监听 window 的 resize 事件．在浏览器窗口变化时再设置下区域高度．
    window.onresize = () => {
        let html = document.documentElement;
        html.style.fontSize = 100 * (section.value.offsetWidth / 1920) + "px";
    };

    invitationWidth.value = (200 * steps.value.offsetWidth) / 1920
})

const invitationLink = ref('')
const str = `user=${encodeURIComponent("好友")}&invitedUserId=${userInfo.value?.userItem?.userId}&source=invited`
invitationLink.value = window.location.origin + '/login?' + str

// 复制功能
const { toClipboard } = clipboard3();
const onCopy = async () => {
    try {
        await toClipboard(invitationLink.value);
        XsyMessage.success('复制成功')
    } catch (e) {
        console.error(e);
    }
}

const inviteRecord = ref([])
const getInviteRecord = () => {
    getInviteRecordApi().then(res => {
        inviteRecord.value = res.data.list || []
    })
}

getInviteRecord()

const inviteRank = ref([])

const avatarList = [inviteRank4, inviteRank5, inviteRank6, inviteRank7, inviteRank8]
const showDeafultAvatar = (index) => {
    return avatarList[index]
}
const getInviteRank = () => {
    getInviteRankApi().then(res => {
        inviteRank.value = res.data.list || []
    })
}

getInviteRank()

</script>

<style scoped lang="scss">
section {
    background: #D9ECFD;
}

.banner {
    .banner-img {
        width: 100%;
    }
}

.activity {
    position: relative;

    img {
        display: block;
        width: 100%;
    }

    .invitationLink {
        position: absolute;
        left: 29.8%;
        top: 62.5%;
        width: 30%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.9vw;
    }

    .invitate-btn {
        position: absolute;
        cursor: pointer;
        width: 8%;
        height: 3.6%;
        left: 64%;
        top: 62%;
    }

    .invitation-qrcode {
        position: absolute;
        left: 44.3%;
        top: 70%;
        width: 10.4%;
        height: 14.6%;
    }
}

.rank {
    padding: 0 0.88rem;

    .content {
        padding: 2.58rem 1.35rem 1rem 1.35rem;
        background-image: url('@/assets/img/console/month-rank.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .top-3 {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.76rem;
            padding: 0 0.7rem;

            .user-list {
                padding: 0 0.2rem 0.5rem 0.2rem;
                text-align: center;
                width: 3.88rem;
                height: 5.05rem;
                margin-top: 0.9rem;

                .defalut-img {
                    display: block;
                    width: 3.5rem;
                    height: 3.58rem;
                }

                .avatar {
                    width: 3.5rem;
                    height: 3.58rem;
                    background-image: url('@/assets/img/console/inviteRank-default.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    img {
                        width:2.57rem;
                        height: 2.57rem;
                        border-radius: 50%;
                        margin-top: 0.7rem;
                    }
                }

                .nick-name {
                    height: 0.24rem;
                    font-size: 0.24rem;
                    font-weight: normal;
                    color: #000000;
                    line-height: 0.24rem;
                    margin: 0.32rem;
                }

                .invite-num {
                    height: 0.24rem;
                    font-size: 0.24rem;
                    font-weight: normal;
                    color: #9D9D9D;
                    line-height: 0.24rem;
                }
            }

            .top1 {
                padding-bottom: 1.37rem;
                margin-top: 0;
            }
        }

        .top-8 {
            display: flex;

            .user-list {
                padding: 0 0.3rem 0.6rem 0.3rem;
                width: 2.67rem;
                height: 3.48rem;
                text-align: center;

                img {
                    display: block;
                    width: 2.07rem;
                    height: 2.07rem;
                    border-radius: 50%;
                }

                .nick-name {
                    height: 0.24rem;
                    font-size: 0.24rem;
                    font-weight: normal;
                    color: #000000;
                    line-height: 0.24rem;
                    margin: 0.32rem;
                }

                .invite-num {
                    height: 0.24rem;
                    font-size: 0.24rem;
                    font-weight: normal;
                    color: #9D9D9D;
                    line-height: 0.24rem;
                }
            }
        }
    }
}

.invite {
    padding: 0 0.88rem;

    .content {
        background-image: url('@/assets/img/console/my-invite.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-top: 2.58rem;

        .table-box {
            width: 12.64rem;
            min-height: 4rem;
            margin: 0 auto;

            .table-head {
                display: flex;

                div {
                    flex: 1;
                    font-size: 16px;
                    color: #07F;
                    font-weight: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                }
            }

            .invite-list {
                display: flex;

                div {
                    flex: 1;
                    font-size: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                }
            }
        }


    }
}
</style>